<%= content_for :page_meta do %>
  <% title "#{@event.title} - DEV" %>
  <link rel="canonical" href="https://dev.to/<%= @event.slug %>"/>
  <meta name="description" content="dev.to | Events">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://dev.to/<%= @event.slug %>" />
  <meta property="og:title" content="<%= @event.title %>" />
  <% if @event.cover_image.present? %>
    <meta property="og:image" content="<%= @event.cover_image_url %>" />
  <% else %>
    <meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png" />
  <% end %>
  <meta property="og:description" content="<%=truncate(strip_tags(@event.description_html), length: 140) %>" />
  <meta property="og:site_name" content="The Practical Dev" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@ThePracticalDev">
  <meta name="twitter:title" content="<%=truncate(strip_tags(@event.title), length: 70) %>">
  <meta property="og:description" content="<%=truncate(strip_tags(@event.description_html), length: 140) %>" />
  <% if @event.cover_image.present? %>
    <meta name="twitter:image:src" content="<%= @event.cover_image_url %>">
  <% else %>
    <meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/g355ol6qsrg0j2mhngz9.png">
  <% end %>
<% end %>

<header>
  <div class="blank-space"></div>
</header>

<style>

  .container .body .event {
    border: none;
    box-shadow: none;
    margin-top: 0px;
  }
  .container .body .event h3 {
    display: none;
  }

  .container .body h1 {
    margin-bottom: 10px;
    text-align: left;
  }

  .container .event .event-description {
    text-align: justify;
  }
  .container .event .event-details {
    font-size: 1.3em;
  }
  .addeventatc {
    border: solid 1px #66e2d5;
  }
  .addeventatc:hover {
    border: 1px solid #557de8;
  }

</style>

<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

<div class="container article">
  <div style="height:30px">
  </div>
  <div class="body">
    <h1 style="padding-left: 20px; font-weight: 500;"><%= @event.category %>: <%= @event.title %></h1>
    <%= render 'event', event: @event %>
    <h3 style="text-align: center"><span style="background-color: yellow; padding: 5px"><a href="/events"> All EVENTS </a></span></h3>
  </div>
</div>
